<template>
  <div class="major-wrapper">
    <div class="background-overlay"></div>

    <div class="content-card">
      <h2 class="page-title">专业管理 - MBTI 测试记录</h2>

      <el-table
          v-if="majors.length > 0"
          :data="majors"
          style="width: 100%"
          border
          row-key="id"
      >
        <el-table-column prop="name" label="专业名称" width="200" />
        <el-table-column prop="collegeName" label="所属学院" width="200" />
        <el-table-column label="测试人数" width="120">
          <template #default="scope">
            {{ scope.row.results.length }}
          </template>
        </el-table-column>

        <el-table-column type="expand">
          <template #default="scope">
            <el-table :data="scope.row.results" border style="width: 100%;">
              <el-table-column prop="studentNo" label="学号" width="120" />
              <el-table-column prop="studentName" label="姓名" width="120" />
              <el-table-column prop="mbtiType" label="MBTI 类型" width="100" />
              <el-table-column prop="testTime" label="测试时间" width="180">
                <template #default="{ row }">
                  {{ formatDate(row.testTime) }}
                </template>
              </el-table-column>
            </el-table>
            <div v-if="scope.row.results.length === 0" class="no-records">
              暂无测试结果
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div v-else class="no-data-tip">暂无专业数据</div>
    </div>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "MajorManagement",
  data() {
    return {
      majors: [],
    };
  },
  created() {
    this.loadMajorResults();
  },
  methods: {
    async loadMajorResults() {
      try {
        const res = await axios.get("http://localhost:8081/api/major-management/results");
        this.majors = res.data;
      } catch (error) {
        console.error("加载专业数据失败", error);
        this.$message.error("获取专业数据失败");
      }
    },
    formatDate(datetimeStr) {
      if (!datetimeStr) return "";
      const dt = new Date(datetimeStr);
      return dt.toLocaleString();
    }
  },
};
</script>

<style scoped>
.major-wrapper {
  min-height: 100vh;
  background: linear-gradient(135deg, #e3f2fd, #fce4ec);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 60px 20px 40px;
  position: relative;
}

.background-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top left, rgba(255, 255, 255, 0.2), transparent 70%),
  radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.2), transparent 70%);
  pointer-events: none;
  z-index: 0;
}

.content-card {
  background: #ffffffcc;
  padding: 30px 40px;
  border-radius: 16px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
  max-width: 1000px;
  width: 100%;
  z-index: 1;
  font-family: Arial, sans-serif;
}

.page-title {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 20px;
  text-align: center;
}

.no-data-tip,
.no-records {
  text-align: center;
  color: #888;
  font-size: 16px;
  padding: 12px;
}
</style>
